<template>
  <div class="categories">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/goods' }">商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="primary" plain>添加分类</el-button>
    <!--1.3 使用组件 - 树状列表（自己封装的组件），可自定义标签名 -->
    <tree-table class="mt-15" :treeStructure="true" :columns="columns" :data-source="dataSource" @deleteCate="deleteCategory" @editCate="editCategory">
    </tree-table>
     <!-- 分页功能 -->
    <!-- <el-pagination
      class='page mt-15'
      :pager-count="5"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="cateforiestotal">
    </el-pagination> -->
  </div>
</template>
<script>
// 1.1 引入组件
import TreeTable from '@/components/TreeGrid/TreeGrid'
import { getCategories } from '@/api'
export default {
  // 1.2注入组件
  components: {
    TreeTable
  },
  data () {
    return {
      // 1.4 导入组件相关数据方法
      dataSource: [],
      columns: [{
        text: '分类名称',
        dataIndex: 'cat_name',
        width: '500px'
      }, {
        text: '是否有效',
        dataIndex: 'cat_deleted',
        width: '100px'
      }, {
        text: '排序',
        dataIndex: 'cat_level',
        width: '100px'
      }],
      cateforiesList: [],
      cateforiestotal: 0, // 用户总条数
      pagesize: 10, // 每页显示多少条，默认10条
      cateforiesnum: 1 // 当前页码，默认为第一页
    }
  },
  created () {
    this.initCategories()
  },
  methods: {
    deleteCategory (cid) {
      // console.log(cid)
    },
    editCategory (cid) {
      // console.log(cid)
    },
    initCategories () {
      console.log(132)
      getCategories(3)
        .then(res => {
          // console.log(res)
          this.dataSource = res.data
        })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      // 改变每页多少条时，将这个值赋值给pagesize属性，再调用获取数据的方法
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
